<template>
  <div class="bookingDetailsPage">
    <van-image class="topImg border_r8" width="100%" height="10rem" fit="cover" :src="topImage">
      <template v-slot:loading>
        <van-loading type="spinner" size="2rem" />
      </template>
    </van-image>
    <div class="bookingDate">
      <div class="dateTitle f_16 fw_700 tc_1 margin_b12">预约时间</div>
      <div class="dateBox bg_w border_r8" @click="calendarShow = true">
        <div class="selectDateBox flex_r_fs_c">
          <span class="dateBoxLeft f_14 tc_8">日期</span>
          <span class="f_16 tc_1">{{ currentDate }}</span>
        </div>
      </div>
      <div class="timeSelecter"></div>
    </div>
    <div class="bookingTime border_r8 bg_w">
      <div class="bookingTimeTitle flex_r_sb_c">
        <div class="titleLeft">
          <span class="f_14 tc_8">时间</span>
          <span v-if="!startTimeText" class="f_16 tc_1">{{ currentTime }}</span>
          <span v-if="startTimeText" class="f_16 tc_1 margin_r8">{{ startTimeText }}</span>
          <span v-if="startTimeText" class="f_16 tc_1">{{ endTimeText }}</span>
        </div>
        <div class="titleRight">
          <div class="cleanBtn border_r4 tc_g" @click="cleanAllTime">重选</div>
        </div>
      </div>
      <div v-if="!allDaySelected" class="bookingTImeShortcut flex_r_fs_c">
        <span class="shortcutTitle f_14 tc_8">快捷</span>
        <div class="shortcutContent flex_r_fs_c">
          <div v-for="(item, index) in shortcut" :key="index">
            <span v-if="item.isShow" class="shortcutItem f_12" :class="[item.selected ? 'shortcutActive' : 'shortcutUnactive']" @click="selectShortcut(item, index)">
              {{ item.name }}
            </span>
          </div>
        </div>
      </div>
      <div class="bookingTimeContent flex_r_fs_fs">
        <div class="btc_left">
          <div><span>15</span></div>
          <div><span>30</span></div>
          <div><span>45</span></div>
        </div>
        <div class="btc_right flex_r_fs_fs">
          <div class="btc_item" v-for="(item, index) in timeArr" :key="index">
            <div class="btc_itemHeader tc_8">{{ item.time }}:00</div>
            <div class="btc_subItem" :class="[subItem.disable ? 'timeBoxDisable' : '', subItem.selected ? 'timeBoxSelected' : '', subItem.isRest ? 'timeBoxRest' : '']" v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="selectTime(item.time, subItem.subTime, subItem.disable)">
              <span v-if="subItem.disable && subItem.isRest" class="tc_w f_11">休息</span>
              <span v-if="subItem.disable && !subItem.isRest" class="tc_w f_11">已满</span>
            </div>
            <!-- <div class="btc_subItem"></div>
            <div class="btc_subItem"></div>
            <div class="btc_subItem"></div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="serviceType bg_w border_r8">
      <div v-if="serviceTypeList.length > 0" class="serviceTop flex_r_sb_c">
        <div class="flex_r_fs_c">
          <span class="f_16 fw_700 tc_1 margin_r8">来访需求</span>
          <span class="f_12 tc_9">可多选</span>
        </div>
        <span class="f_12 tc_9">有助于更好的服务到您</span>
      </div>
      <div v-if="serviceTypeList.length > 0" class="serviceContent">
        <van-row type="flex">
          <van-col class="serviceItemBox margin_b16" span="6" v-for="(item, index) in serviceTypeList" :key="index">
            <div class="serviceItem flex_c_c_c" @click="selectServiceType(item, index)">
              <div class="serviceItemTop border_r4 margin_b4" :class="[item.selected ? 'active' : 'unactive']">
                <i class="iconfont f_26" :class="item.iconfont"></i>
              </div>
              <div class="serviceItemText f_12 tc_5 margin_t4">
                {{ item.name }}
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="serviceBottom flex_r_fs_c">
        <div class="bottomLeft">
          <!-- <span class="f_12 tc_9">服务配件</span> -->
          <span class="f_12 tc_5">备注</span>
        </div>
        <div class="bottomRight">
          <!-- <div class="toolsItemBox border_r4" v-for="(item, index) in serviceToolList" :key="index">
            <div class="toolsItem border_r4" :class="item.selected ? 'toolActive' : 'toolUnactive'" @click="selectServiceTool(item, index)">{{ item.text }}</div>
          </div>
          <div class="otherTools">
            <div class="f_12 tc_9 margin_b8">其他</div>
            <van-field class="otherToolsInput f_14" v-model="otherTools" rows="1" autosize type="textarea" placeholder="请输入" />
          </div> -->
          <div class="otherTools">
            <van-field class="otherToolsInput f_14" v-model="otherTools" rows="1" autosize type="textarea" placeholder="请输入您其他的需要" />
          </div>
        </div>
      </div>
    </div>
    <div class="peopleNum bg_w border_r4 flex_r_fs_c">
      <div class="f_12 tc_5">人数</div>
      <div style="flex: 4">
        <van-field class="peopleNumInput f_14" v-model="peopleNum" type="number" placeholder="您的随行人数" input-align="left" />
      </div>
    </div>
    <div class="footerText f_12 tc_8" v-text="footerText"></div>
    <div class="footer bg_w">
      <!-- <div class="footerBtn bg_g tc_w f_16" @click="confirmBooking">确认预约</div> -->
      <van-button class="footerBtn bg_g tc_w f_16" color="#31A2A3" :disabled="btnDisable" :loading="btnDisable" round block type="info" @click="confirmBooking"> 确认预约 </van-button>
    </div>
    <van-calendar v-model="calendarShow" color="#31A2A3" :formatter="formatter" :show-confirm="false" :min-date="calendarMinDate" :max-date="calendarMaxDate" @select="onCalendarSelect" />
  </div>
</template>

<script>
import booking from '@/api/booking'
import getLunarDate from '@/utils/getLunarDate.js'
export default {
  data() {
    return {
      id: this.$route.params.id,
      topImage: '',
      calendarShow: false,
      btnDisable: false,
      currentDate: '请选择预约日期',
      currentDateValue: '',
      currentTime: '请选择预约时间',
      serviceTypeList: [
        // {
        //   id: '1',
        //   name: '参观',
        //   iconfont: 'iconcanguan',
        //   disable: false,
        //   selected: false
        // },
        // {
        //   id: '2',
        //   name: '洽谈',
        //   iconfont: 'iconqiatan',
        //   disable: false,
        //   selected: false
        // },
        // {
        //   id: '3',
        //   name: '试衣',
        //   iconfont: 'iconshiyi',
        //   disable: false,
        //   selected: false
        // },
        // {
        //   id: '4',
        //   name: '走秀',
        //   iconfont: 'iconzouxiu',
        //   disable: false,
        //   selected: false
        // },
        // {
        //   id: '5',
        //   name: '拍摄',
        //   iconfont: 'iconsheying',
        //   disable: false,
        //   selected: false
        // },
        // {
        //   id: '6',
        //   name: '会议室',
        //   iconfont: 'iconhuiyi',
        //   disable: false,
        //   selected: false
        // },
        // {
        //   id: '7',
        //   name: '茶室',
        //   iconfont: 'iconchashi',
        //   disable: false,
        //   selected: false
        // }
      ],
      serviceToolList: [
        {id: '1', text: '黑板', selected: false},
        {id: '2', text: '茶水', selected: false},
        {id: '3', text: '矿泉水', selected: false},
        {id: '4', text: '试验台', selected: false},
        {id: '5', text: '屏幕投放(PPT/视频等)', selected: false},
        {id: '6', text: '展示品牌产品', selected: false}
      ],
      otherTools: '',
      peopleNum: '',
      footerText: '如需更多帮助, 请与联络人沟通',
      timeCallBack: {
        start_time: 9,
        end_time: 17,
        // disable: ['10.30', '10.45', '11.00', '11.15', '11.30']
        disable: []
      },
      timeArr: [
        // {
        //   time: 9,
        //   children: [
        //     {subTime: 0, selected: false, disable: false},
        //     {subTime: 1, selected: false, disable: false},
        //     {subTime: 2, selected: false, disable: false},
        //     {subTime: 3, selected: false, disable: false}
        //   ]
        // }
      ],
      disableTimeArr: [
        {
          time: 9,
          children: [{subTime: 0}, {subTime: 1}, {subTime: 2}]
        }
      ],
      startTimeText: '',
      endTimeText: '',
      disable_before: {
        time: null,
        subTime: null
      },
      disable_after: {
        time: null,
        subTime: null
      },
      startTime: {
        time: null,
        subTime: null
      },
      endTime: {
        time: null,
        subTime: null
      },
      singleServiceName: '',
      calendarMaxDate: '',
      calendarMinDate: '',
      afterThrough: {
        time: null,
        subTime: null
      },
      beforeThrough: {
        time: null,
        subTime: null
      },
      restArr: [],
      isAllDay: false,
      allDaySelected: false,
      shortcut: [
        {name: '一天', code: 0, isShow: true, selected: false},
        {name: '上午', code: 1, isShow: true, selected: false},
        {name: '下午', code: 2, isShow: true, selected: false}
      ],
      shortcut_am_end: {
        // 上午休息前的那一格
        time: null,
        subTime: null
      },
      shortcut_pm_start: {
        // 下午休息完后的第一格
        time: null,
        subTime: null
      },
      workStart: {
        // 上班开始节点
        time: null,
        subTimg: null
      },
      workEnd: {
        // 下班节点
        time: null,
        subTimg: null
      },
      holidayList: []
    }
  },
  methods: {
    getVenuesData() {
      let id = this.id
      booking.getVenuesData({id: id}).then((res) => {
        this.restArr = res.data.rest
        this.topImage = res.data.venues.small_image
        this.holidayList = res.data.rest_day // 获取后端的休息日信息
        this.serviceTypeList = []
        if (res.data.server.length > 0) {
          res.data.server.forEach((item, index) => {
            item.disable = false
            item.selected = false
            this.serviceTypeList.push(item)
          })
        }
        if (!this.$tools.isNullOrEmpty(res.data.venues.starttime)) {
          this.timeCallBack.start_time = res.data.venues.starttime
        }
        if (!this.$tools.isNullOrEmpty(res.data.venues.endtime)) {
          this.timeCallBack.end_time = res.data.venues.endtime
        }
        this.getTimeArr()
        this.getBreak()
      })
    },
    // 该方法用于从后台获取假期信息, 在前端做筛选处理, 后端假期数据处理有问题, 暂时放弃
    // getHoliday() {
    //   booking.getHoliday().then((res) => {
    //     this.holidayList = res.data
    //   })
    // },
    getBreak() {
      let start = this.restArr[0].split(':')
      let end = this.restArr[this.restArr.length - 1].split(':')
      let breakS = {}
      let breakE = {}
      let workS = {}
      let workE = {}
      if (start[1] === '00') {
        breakS.time = parseInt(start[0]) - 1
        breakS.subTime = 3
      } else if (start[1] === '15') {
        breakS.time = parseInt(start[0]) - 1
        breakS.subTime = 3
      } else if (start[1] === '30') {
        breakS.time = parseInt(start[0])
        breakS.subTime = 0
      } else if (start[1] === '45') {
        breakS.time = parseInt(start[0])
        breakS.subTime = 1
      }

      if (end[1] === '00') {
        breakE.time = parseInt(end[0]) + 1
        breakE.subTime = 0
      } else if (end[1] === '15') {
        breakE.time = parseInt(end[0])
        breakE.subTime = 1
      } else if (end[1] === '30') {
        breakE.time = parseInt(end[0])
        breakE.subTime = 2
      } else if (end[1] === '45') {
        breakE.time = parseInt(end[0])
        breakE.subTime = 3
      }

      workS.time = this.timeCallBack.start_time
      workS.subTime = 0

      workE.time = this.timeCallBack.end_time
      workE.subTime = 3

      this.shortcut_am_end = breakS
      this.shortcut_pm_start = breakE
      this.workStart = workS
      this.workEnd = workE

      // 以下用于判断该天是否已有用户选择时间, 并显示/隐藏相应的快捷按钮
      let am = this.timeCallBack.disable.some((item, index) => {
        return this.shortcut_am_end.time >= parseInt(item.split(':')[0])
      })
      let pm = this.timeCallBack.disable.some((item, index) => {
        return this.shortcut_pm_start.time <= parseInt(item.split(':')[0])
      })

      if (am) {
        this.$set(this.shortcut, 1, {name: '上午', code: 1, isShow: false, selected: false})
      } else {
        this.$set(this.shortcut, 1, {name: '上午', code: 1, isShow: true, selected: false})
      }

      if (pm) {
        this.$set(this.shortcut, 2, {name: '下午', code: 2, isShow: false, selected: false})
      } else {
        this.$set(this.shortcut, 2, {name: '下午', code: 2, isShow: true, selected: false})
      }

      if (am && pm) {
        this.allDaySelected = true
      } else {
        this.allDaySelected = false
      }
    },
    formatter(day) {
      // 该方法用于从后台获取假期信息, 在前端做筛选处理
      let year = day.date.getFullYear()
      let month = day.date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      let d = day.date.getDate()
      d = d < 10 ? '0' + d : d
      let dayStr = year + '-' + month + '-' + d

      const week = day.date.getDay()
      if (getLunarDate.IsLastDayBeforeNewYearOfCN(day.date)) {
        day.bottomInfo = '除夕'
      } else if (getLunarDate.IsNewYearOfCN(day.date)) {
        day.bottomInfo = '新年'
      } else if (getLunarDate.IsAnnualLeaveCN(day.date)) {
        day.bottomInfo = '年假'
      } else if (!getLunarDate.IsOTCN(day.date) && week === 0) {
        day.bottomInfo = '休息'
      } else if (this.filterHoliday(dayStr)) {
        day.bottomInfo = '休息'
      }

      return day
    },
    // 该方法用于从后台获取假期信息, 在前端做筛选处理
    filterHoliday(day) {
      if (this.holidayList.indexOf(day) !== -1) {
        return true
      } else {
        return false
      }
    },
    onCalendarConfirm(data) {
      let handler = new Date(data)
      if (getLunarDate.IsLastDayBeforeNewYearOfCN(data)) {
        this.$toast.fail('这天除夕哦, 换一天呗 ^_^')
        return
      }
      if (getLunarDate.IsNewYearOfCN(data)) {
        this.$toast.fail('过年要好好休息哦, 换一天呗 ^_^')
        return
      }
      if (handler.getDay() === 0) {
        this.$toast.fail('这天是周日呢, 换一天呗 ^_^')
        return
      }
      let res = ''
      let week = ''
      if (handler.getDay() === 0) week = '周日'
      if (handler.getDay() === 1) week = '周一'
      if (handler.getDay() === 2) week = '周二'
      if (handler.getDay() === 3) week = '周三'
      if (handler.getDay() === 4) week = '周四'
      if (handler.getDay() === 5) week = '周五'
      if (handler.getDay() === 6) week = '周六'
      res = handler.getFullYear() + '-' + ('0' + (handler.getMonth() + 1)).slice(-2) + '-' + ('0' + handler.getDate()).slice(-2) + ' ' + week
      this.currentDate = res
      this.calendarShow = false
    },
    onCalendarSelect(day) {
      // 该方法用于从后台获取假期信息, 在前端做筛选处理
      let year = day.getFullYear()
      let month = day.getMonth() + 1
      month = month < 10 ? '0' + month : month
      let d = day.getDate()
      d = d < 10 ? '0' + d : d
      let dayStr = year + '-' + month + '-' + d

      let handler = new Date(day)
      let flag = true
      if (getLunarDate.IsLastDayBeforeNewYearOfCN(day)) {
        this.$toast.fail('这天除夕哦, 换一天呗 ^_^')
        flag = false
        // return
      }
      if (getLunarDate.IsAnnualLeaveCN(day)) {
        this.$toast.fail('公司年假哦, 换一天呗 ^_^')
        flag = false
        // return
      }
      if (getLunarDate.IsNewYearOfCN(day)) {
        this.$toast.fail('过年要好好休息哦, 换一天呗 ^_^')
        flag = false
        // return
      }
      if (!getLunarDate.IsOTCN(day) && handler.getDay() === 0) {
        this.$toast.fail('这天是周日呢, 换一天呗 ^_^1')
        flag = false
        // return
      }
      if (this.filterHoliday(dayStr)) {
        this.$toast.fail('今天休息呢, 换一天呗 ^_^1')
        flag = false
        // return
      }
      this.currentDateValue = handler.getTime() / 1000 // 毫秒
      let res = ''
      let week = ''
      if (handler.getDay() === 0) week = '周日'
      if (handler.getDay() === 1) week = '周一'
      if (handler.getDay() === 2) week = '周二'
      if (handler.getDay() === 3) week = '周三'
      if (handler.getDay() === 4) week = '周四'
      if (handler.getDay() === 5) week = '周五'
      if (handler.getDay() === 6) week = '周六'
      res = handler.getFullYear() + '-' + ('0' + (handler.getMonth() + 1)).slice(-2) + '-' + ('0' + handler.getDate()).slice(-2) + ' ' + week
      this.currentDate = res
      this.getCurrentDateInfo()
      if (flag) {
        this.calendarShow = false
      }
    },
    getCalendarDate() {
      // 设置日历的可选日期为2个月
      let date = new Date()
      let year = new Date(date).getFullYear()
      let month = new Date(date).getMonth() + 1
      let day = new Date(date).getDate()

      let nextMonth = parseInt(month) + 1
      if (nextMonth > 12) {
        ++year
        month = 1
      } else {
        month = nextMonth
      }
      let startDate = date
      let endDate = new Date(year, month, day)
      this.calendarMaxDate = endDate
      this.calendarMinDate = startDate
    },
    getCurrentDateInfo() {
      let id = this.id
      booking.getVenuesData({id: id, date: this.currentDateValue}).then((res) => {
        this.serviceTypeList = []
        this.timeCallBack.disable = []
        this.cleanAllTime()
        this.restArr = res.data.rest
        if (res.data.server.length > 0) {
          res.data.server.forEach((item, index) => {
            item.disable = false
            item.selected = false
            this.serviceTypeList.push(item)
          })
        }
        if (!this.$tools.isNullOrEmpty(res.data.venues.starttime)) {
          this.timeCallBack.start_time = res.data.venues.starttime
        }
        if (!this.$tools.isNullOrEmpty(res.data.venues.endtime)) {
          this.timeCallBack.end_time = res.data.venues.endtime
        }
        if (res.data.joins.length > 0) {
          this.timeCallBack.disable = res.data.joins
          // 如果该天有已经被其他用户选择的格子, 隐藏一天快捷按钮
          this.shortcut[0].isShow = false
        } else {
          this.shortcut[0].isShow = true
        }
        this.getTimeArr()
        this.getBreak()
      })
    },
    selectServiceType(data, index) {
      if (!data.disable) {
        data.selected = !data.selected
        this.$set(this.serviceTypeList, index, data)
      }
    },
    getServiceType() {
      let serviceType = []
      this.serviceTypeList.forEach((item, index) => {
        if (item.selected) {
          serviceType.push(item.id)
          this.singleServiceName = item.name
        }
      })
      return serviceType.join(',')
    },
    selectServiceTool(data, index) {
      if (!data.disable) {
        data.selected = !data.selected
        this.$set(this.serviceToolList, index, data)
      }
    },
    selectShortcut(data, code) {
      // 单选, 将之前选择的selected清空
      this.isAllDay = false
      this.shortcut.forEach((item, index) => {
        item.selected = false
      })

      if (code === 0) {
        // 如果快捷按钮选择了一天, 则不允许用户再点击时间选择格子
        this.isAllDay = true
      }
      data.selected = !data.selected
      this.$set(this.shortcut, code, data)
      this.setShortcutTime(data.code)
    },
    setShortcutTime(code) {
      // code = 0   一天
      // code = 1   上午
      // code = 2   下午
      if (code === 0) {
        this.startTime.time = this.timeArr[0].time
        this.startTime.subTime = this.timeArr[0].children[0].subTime

        this.endTime.time = this.timeArr[this.timeArr.length - 1].time
        this.endTime.subTime = this.timeArr[this.timeArr.length - 1].children[3].subTime

        this.renderSingleTime()
        this.renderTimeText()
      } else if (code === 1) {
        this.startTime.time = this.workStart.time
        this.startTime.subTime = this.workStart.subTime

        this.endTime.time = this.shortcut_am_end.time
        this.endTime.subTime = this.shortcut_am_end.subTime

        this.renderSingleTime()
        this.renderTimeText()
      } else if (code === 2) {
        this.startTime.time = this.shortcut_pm_start.time
        this.startTime.subTime = this.shortcut_pm_start.subTime

        this.endTime.time = this.workEnd.time
        this.endTime.subTime = this.workEnd.subTime

        this.renderSingleTime()
        this.renderTimeText()
      }
    },
    confirmBooking() {
      let _this = this
      let data = _this.getSubmitData()
      if (!data) {
        return
      }
      // console.log(data)
      _this.btnDisable = true
      booking.submitVenuesData(data).then((res) => {
        _this.btnDisable = false
        if (res.code === 0) {
          this.$toast.fail({
            message: res.msg
          })
        } else {
          this.$toast.success({
            message: '预约申请成功, 请等待审批',
            onClose: function () {
              _this.$router.replace({
                path: '/user'
              })
            }
          })
        }
      })
    },
    getSubmitData() {
      let data = {
        id: '',
        date: '',
        start_time: '',
        end_time: '',
        remark: '',
        num: 0,
        service: ''
      }
      data.id = this.id
      if (this.$tools.isNullOrEmpty(data.id)) {
        this.$dialog.alert({
          title: '注意',
          message: '数据开小差了呢, 请退出该页面重试'
        })
        return false
      }
      data.date = this.currentDateValue
      if (this.$tools.isNullOrEmpty(data.date)) {
        this.$dialog.alert({
          title: '注意',
          message: '预约日期您没有选哦!'
        })
        return false
      }
      data.start_time = this.startTimeText.slice(0, -2)
      if (this.$tools.isNullOrEmpty(data.start_time)) {
        this.$dialog.alert({
          title: '注意',
          message: '预约时间不全呢亲!'
        })
        return false
      }
      data.end_time = this.endTimeText.slice(0, -2)
      if (this.$tools.isNullOrEmpty(data.end_time)) {
        this.$dialog.alert({
          title: '注意',
          message: '预约时间不全呢亲!'
        })
        return false
      }
      data.remark = this.otherTools
      data.num = parseInt(this.peopleNum) || 0
      data.service = this.getServiceType()
      if (this.$tools.isNullOrEmpty(data.service)) {
        this.$dialog.alert({
          title: '注意',
          message: '请选择服务类型呢亲!'
        })
        return false
      }

      // 如果服务类型仅为参观, 预约时间限制为一小时内
      if (data.service.length === 1 && (data.service === '6' || this.singleServiceName === '参观')) {
        if (!this.$tools.isOneHour(data.start_time, data.end_time)) {
          this.$dialog.alert({
            title: '注意',
            message: '您当前选择的服务类型仅为参观, 但预约时长超过一小时, 请重新调整时长或者添加其他的参观类型!'
          })
          return false
        }
      }

      return data
    },

    // 时间选择模块交互逻辑
    getTimeArr() {
      let startTime = this.timeCallBack.start_time
      let endTime = this.timeCallBack.end_time
      this.timeArr = []
      for (let i = startTime; i <= endTime; i++) {
        this.timeArr.push({
          time: i,
          children: [
            {subTime: 0, realTime: '15', selected: false, disable: false, isRest: false},
            {subTime: 1, realTime: '30', selected: false, disable: false, isRest: false},
            {subTime: 2, realTime: '45', selected: false, disable: false, isRest: false},
            {subTime: 3, realTime: '00', selected: false, disable: false, isRest: false}
          ]
        })
      }
      // 开始过滤disable的时间
      let intTimeArr = [] // 用于存放整点(即10.00)之类的数据, 因为10.00需要触发的是9点最后一格, 而不是10点第一格
      let lastTime = this.timeCallBack.end_time
      this.timeCallBack.disable.forEach((item, index) => {
        let arr = item.split(':')
        let disableTime = parseInt(arr[0])
        let disableSubTime = arr[1]
        this.timeArr.forEach((subItem, subIndex) => {
          if (subItem.time === disableTime) {
            if (disableSubTime === '15') {
              subItem.children[0].disable = true
            }
            if (disableSubTime === '30') {
              subItem.children[1].disable = true
            }
            if (disableSubTime === '45') {
              subItem.children[2].disable = true
            }
            if (disableSubTime === '00') {
              intTimeArr.push(disableTime - 1)
            }
            // if (disableSubTime === '00' && subIndex === this.timeArr.length - 1) {
            //   intTimeArr.push(disableTime)
            // }
          } else if (disableTime - lastTime === 1 && disableSubTime === '00') {
            // 用于处理用户预约到最后节点的的问题
            intTimeArr.push(lastTime)
          } else if (disableTime === lastTime + 1) {
            // intTimeArr.push(disableTime)
          }
        })
      })
      intTimeArr.forEach((item, index) => {
        this.timeArr.forEach((subItem, subIndex) => {
          if (item === subItem.time) {
            subItem.children[3].disable = true
          }
        })
      })

      // 开始过滤休息的时间
      let restTimeArr = [] // 用于存放整点(即10.00)之类的数据, 因为10.00需要触发的是9点最后一格, 而不是10点第一格
      this.restArr.forEach((item, index) => {
        let arr = item.split(':')
        let disableTime = parseInt(arr[0])
        let disableSubTime = arr[1]
        this.timeArr.forEach((subItem, subIndex) => {
          if (subItem.time === disableTime) {
            if (disableSubTime === '15') {
              subItem.children[0].disable = true
              subItem.children[0].isRest = true
            }
            if (disableSubTime === '30') {
              subItem.children[1].disable = true
              subItem.children[1].isRest = true
            }
            if (disableSubTime === '45') {
              subItem.children[2].disable = true
              subItem.children[2].isRest = true
            }
            if (disableSubTime === '00') {
              restTimeArr.push(disableTime - 1)
            }
          }
        })
      })
      restTimeArr.forEach((item, index) => {
        this.timeArr.forEach((subItem, subIndex) => {
          if (item === subItem.time) {
            subItem.children[3].disable = true
            subItem.children[3].isRest = true
          }
        })
      })

      // 构建两个点, 用于处理跨越disable时的渲染问题
      // 构建disable_before
      if (this.timeCallBack.disable.length <= 0) {
        return
      }
      let firstDisable = this.timeCallBack.disable[0]
      this.disable_before.time = parseInt(firstDisable.split(':')[0])
      if (firstDisable.split(':')[1] === '15') {
        this.disable_before.time = parseInt(firstDisable.split(':')[0]) - 1
        this.disable_before.subTime = 3
      } else if (firstDisable.split(':')[1] === '30') {
        this.disable_before.subTime = 0
      } else if (firstDisable.split(':')[1] === '45') {
        this.disable_before.subTime = 1
      } else if (firstDisable.split(':')[1] === '00') {
        this.disable_before.subTime = 2
        // this.disable_before.time = parseInt(firstDisable.split('.')[0]) - 1
      }
      // 构建disable_after
      let lastDisable = this.timeCallBack.disable[this.timeCallBack.disable.length - 1]
      this.disable_after.time = parseInt(lastDisable.split(':')[0])
      if (lastDisable.split(':')[1] === '15') {
        this.disable_after.subTime = 1
      } else if (lastDisable.split(':')[1] === '30') {
        this.disable_after.subTime = 2
      } else if (lastDisable.split(':')[1] === '45') {
        this.disable_after.subTime = 3
      } else if (lastDisable.split(':')[1] === '00') {
        this.disable_after.subTime = 0
        this.disable_after.time = parseInt(lastDisable.split(':')[0])
      }
    },
    isThroughDisable(type) {
      let goIn = false
      for (let i = 0; i < this.timeArr.length; i++) {
        let item = this.timeArr[i]
        if (item.time >= this.startTime.time && item.time <= this.endTime.time) {
          if (item.children) {
            for (let l = 0; l < item.children.length; l++) {
              if (type === 'after') {
                if (item.children[l].disable) {
                  goIn = true
                } else {
                  if (goIn) {
                    this.afterThrough.time = item.time
                    this.afterThrough.subTime = item.children[l].subTime
                    return true
                  }
                }
              } else if (type === 'before') {
                if (item.children[l].disable && item.children[l].subTime !== 0) {
                  if (item.children[l].subTime < this.startTime.subTime) {
                    // 当开始时间与disable的时间位于同一小时, 判断subTime, 需要大于disable才可以
                    return
                  }
                  this.beforeThrough.time = item.time
                  this.beforeThrough.subTime = item.children[l - 1].subTime
                  return true
                } else if (item.children[l].disable && item.children[l].subTime === 0) {
                  if (this.startTime.time === item.time) {
                    return
                  }
                  this.beforeThrough.time = item.time - 1
                  this.beforeThrough.subTime = 3
                  return true
                }
              }
            }
          }
        }
      }
    },
    selectTime(time, subTime, disable) {
      if (this.isAllDay) {
        return
      }
      if (disable) {
        return
      }
      // 触发点击后, 判断startTime是否为空
      // 是则表示没有开始时间, 将这次得到的时间赋值到startTime
      // 否则表示已有开始时间, 将这次得到的时间赋值到endTime
      if (this.isNullOrEmpty(this.startTime.time)) {
        // 第一次点击
        this.startTime.time = time
        this.startTime.subTime = subTime
        this.endTime.time = time
        this.endTime.subTime = subTime
      } else {
        // 非第一次点击
        if (time < this.startTime.time) {
          // 当非第一次点击的time小于startTime
          if (this.startTime.time >= this.disable_after.time && time < this.disable_after.time) {
            // 当时间渲染是自右向左的跨过disable时(即点击的time需要小于disable_after), startTIme不能小于disable_after
            time = this.disable_after.time
            subTime = this.disable_after.subTime
          }
          if (this.isNullOrEmpty(this.endTime.time)) {
            // 非第一次点击, 并且endTime为null, 即这次是第二次点击时
            // 将startTime赋值为endTime, 并且将这次点击设置为startTime
            this.endTime.time = this.startTime.time
            this.endTime.subTime = this.startTime.subTime
            this.startTime.time = time
            this.startTime.subTime = subTime
            // 以下flag用于判断startTime与endTime之间的格子是否有disable存在
            // 如果有, 则将disable之后的第一个格子作为startTime使用
            let flag = this.isThroughDisable('after')
            if (flag) {
              this.startTime.time = this.afterThrough.time
              this.startTime.subTime = this.afterThrough.subTime
            }
          } else {
            this.startTime.time = time
            this.startTime.subTime = subTime
            // 以下flag用于判断startTime与endTime之间的格子是否有disable存在
            // 如果有, 则将disable之后的第一个格子作为startTime使用
            let flag = this.isThroughDisable('after')
            if (flag) {
              this.startTime.time = this.afterThrough.time
              this.startTime.subTime = this.afterThrough.subTime
            }
          }
        } else if (time === this.startTime.time) {
          // 当非第一次点击的time等于startTime
          if (subTime > this.startTime.subTime) {
            if (time === this.disable_after.time && subTime <= this.disable_after.subTime) {
              this.$toast.fail('该点超出可选区间')
              return
            }
            this.endTime.time = time
            this.endTime.subTime = subTime
          } else {
            if (!this.isNullOrEmpty(this.endTime.time) && time !== this.endTime.time) {
              // 当有endTime并且这次点击并不在endTime上时
              this.startTime.time = time
              this.startTime.subTime = subTime
            } else {
              this.endTime.time = this.startTime.time
              this.endTime.subTime = this.startTime.subTime
              this.startTime.time = time
              this.startTime.subTime = subTime
            }
          }
        } else {
          // 当非第一次点击的time大于startTime
          if (this.startTime.time <= this.disable_before.time) {
            // 当时间渲染是自左向右的跨过disable时, endTime不能大于disable_before
            if (time > this.disable_before.time) {
              this.endTime.time = this.disable_before.time
              this.endTime.subTime = this.disable_before.subTime
            } else {
              this.endTime.time = time
              this.endTime.subTime = subTime
            }
          } else {
            if (this.startTime.time >= this.disable_before.time && this.endTime.time < this.disable_after.time && time > this.disable_after.time) {
              // 由于存在点击的时间的time与disable_after的time处于同一小时的情况, 将time>=this.disable_after.time改为time>this.disable_after.time
              this.$toast.fail('该点超出可选区间')
              return
            }
            this.endTime.time = time
            this.endTime.subTime = subTime
            // 以下flag用于判断startTime与endTime之间的格子是否有disable存在
            // 如果有, 则将disable之前的第一个格子作为endTime使用
            let flag = this.isThroughDisable('before')
            if (flag) {
              this.endTime.time = this.beforeThrough.time
              this.endTime.subTime = this.beforeThrough.subTime
            }
          }
        }
      }

      // 该处用于处理用户选择了快捷按钮后, 再点击格子的逻辑
      let currentCode = null
      this.shortcut.forEach((item, index) => {
        if (item.selected) {
          currentCode = item.code
        }
      })
      let resetArr = [
        {name: '一天', code: 0, isShow: true, selected: false},
        {name: '上午', code: 1, isShow: true, selected: false},
        {name: '下午', code: 2, isShow: true, selected: false}
      ]
      if (currentCode === 1) {
        // 用户已选择上午
        if (time > this.shortcut_am_end.time) {
          return
        } else if (time === this.shortcut_am_end.time && subTime === this.shortcut_am_end.subTime) {
          return
        } else {
          this.$set(this.shortcut, currentCode, resetArr[currentCode])
        }
      } else if (currentCode === 2) {
        // 用户已选择下午
        if (time < this.shortcut_pm_start.time) {
          return
        } else if (time === this.shortcut_pm_start.time && subTime === this.shortcut_pm_start.subTime) {
          return
        } else {
          this.$set(this.shortcut, currentCode, resetArr[currentCode])
        }
      } else if (currentCode === 0) {
        this.$set(this.shortcut, currentCode, resetArr[currentCode])
      }

      // currentCode = null, 表示用户没有选择快捷按钮
      // 判断用户是否选择全部的上午/下午的格子, 将按钮点亮
      if (this.isNullOrEmpty(currentCode)) {
        if (this.startTime.time === this.workStart.time && this.startTime.subTime === this.workStart.subTime && this.endTime.time === this.shortcut_am_end.time && this.endTime.subTime === this.shortcut_am_end.subTime) {
          // 上午
          let am = {name: '上午', code: 1, isShow: true, selected: true}
          this.$set(this.shortcut, 1, am)
        } else if (this.startTime.time === this.shortcut_pm_start.time && this.startTime.subTime === this.shortcut_pm_start.subTime && this.endTime.time === this.workEnd.time && this.endTime.subTime === this.workEnd.subTime) {
          // 下午
          let pm = {name: '下午', code: 2, isShow: true, selected: true}
          this.$set(this.shortcut, 2, pm)
        }
      }

      this.renderSingleTime()
      this.renderTimeText()
    },
    renderTimeText() {
      if (this.startTime.time === this.endTime.time && this.startTime.subTime === this.endTime.subTime) {
        // 当选择的是同一格时间
        let startString = ''
        startString = this.startTime.time
        startString += ':' + this.filterStartSubTime(this.startTime.subTime)
        this.startTimeText = startString

        let endString = ''
        if (this.endTime.subTime === 3) {
          // this.endTime.time++
          endString = this.endTime.time + 1
        } else {
          endString = this.endTime.time
        }
        endString += ':' + this.filterEndSubTime(this.endTime.subTime)
        this.endTimeText = endString
      } else {
        if (!this.isNullOrEmpty(this.startTime.time)) {
          let startString = ''
          startString = this.startTime.time
          startString += ':' + this.filterStartSubTime(this.startTime.subTime)
          this.startTimeText = startString
        }
        if (!this.isNullOrEmpty(this.endTime.time)) {
          let endString = ''
          let subTimeString = this.filterEndSubTime(this.endTime.subTime)
          if (subTimeString.indexOf('00') !== -1) {
            // 当结束时间选择的是第四格, 则表示用完了这个小时
            // 应该表示为下一个小时的00分
            endString = this.endTime.time + 1
          } else {
            endString = this.endTime.time
          }
          endString += ':' + subTimeString
          this.endTimeText = endString
        }
      }
    },
    filterStartSubTime(time) {
      switch (time) {
        case 0: {
          return '00开始'
        }
        case 1: {
          return '15开始'
        }
        case 2: {
          return '30开始'
        }
        case 3: {
          return '45开始'
        }
        default: {
          return ''
        }
      }
    },
    filterEndSubTime(time) {
      switch (time) {
        case 0: {
          return '15结束'
        }
        case 1: {
          return '30结束'
        }
        case 2: {
          return '45结束'
        }
        case 3: {
          return '00结束'
        }
        default: {
          return ''
        }
      }
    },
    renderSingleTime() {
      if (!this.isNullOrEmpty(this.startTime.time) && this.isNullOrEmpty(this.endTime.time)) {
        this.timeArr.forEach((item, index) => {
          if (item.time === this.startTime.time) {
            item.children[this.startTime.subTime].selected = true
          }
        })
      } else {
        this.timeArr.forEach((item, index) => {
          if (item.time === this.endTime.time) {
            item.children[this.endTime.subTime].selected = true
          }
        })
      }
      if (!this.isNullOrEmpty(this.startTime.time) && !this.isNullOrEmpty(this.endTime.time)) {
        this.timeArr.forEach((item, index) => {
          if (item.time >= this.startTime.time && item.time <= this.endTime.time) {
            // 过滤出在开始时间与结束时间的列, 才进行渲染
            this.renderTime(item)
          } else {
            // 不在开始时间与结束时间的列, 清除渲染
            this.cleanTime(item)
          }
        })
      }
    },
    renderTime(data) {
      // console.log(data)
      if (this.startTime.time === this.endTime.time) {
        // 开始时间和结束时间在同一小时
        data.children.forEach((item, index) => {
          if (item.subTime >= this.startTime.subTime && item.subTime <= this.endTime.subTime) {
            item.selected = true
          } else {
            item.selected = false
          }
        })
      } else {
        // 开始时间和结束时间在不同小时
        // 渲染开始列
        if (data.time === this.startTime.time) {
          data.children.forEach((item, index) => {
            if (!item.disable) {
              if (item.subTime >= this.startTime.subTime) {
                item.selected = true
              } else {
                item.selected = false
              }
            }
            // if (item.subTime >= this.startTime.subTime) {
            //   item.selected = true
            // } else {
            //   item.selected = false
            // }
          })
        }
        // 渲染开始与结束之间的列
        if (data.time > this.startTime.time && data.time < this.endTime.time) {
          data.children.forEach((item, index) => {
            item.selected = true
          })
        }
        // 渲染结束列
        if (data.time === this.endTime.time) {
          data.children.forEach((item, index) => {
            if (!item.disable) {
              if (item.subTime <= this.endTime.subTime) {
                item.selected = true
              } else {
                item.selected = false
              }
            }
            // if (item.subTime <= this.endTime.subTime) {
            //   item.selected = true
            // } else {
            //   item.selected = false
            // }
          })
        }
      }
    },
    cleanAllTime() {
      this.startTime.time = null
      this.startTime.subTime = null
      this.endTime.time = null
      this.endTime.subTime = null
      this.startTimeText = ''
      this.endTimeText = ''
      this.disable_before.time = null
      this.disable_before.subTime = null
      this.disable_after.time = null
      this.disable_after.subTime = null
      this.getTimeArr()
      this.timeArr.forEach((item, index) => {
        this.cleanTime(item)
      })
      this.isAllDay = false
      this.shortcut.forEach((item, index) => {
        item.selected = false
      })
    },
    cleanTime(data) {
      data.children.forEach((item, index) => {
        item.selected = false
      })
    },
    isNullOrEmpty(value) {
      return value === '' || value === null || value === undefined
    }
  },
  beforeMount() {
    this.getCalendarDate()
  },
  mounted() {
    this.getVenuesData()
    // 该方法用于从后台获取假期信息, 在前端做筛选处理, 后端假期数据处理有问题, 暂时放弃
    // this.getHoliday()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.bookingDetailsPage {
  padding: 0.8rem 1.4rem;
  box-sizing: border-box;
}
.topImg {
  display: block;
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.bookingDate {
  margin-bottom: 0.8rem;
  .selectDateBox {
    padding: 1.5rem 1.2rem;
    box-sizing: border-box;
    width: 100%;
    height: 4.4rem;
    line-height: 4.4rem;
    .dateBoxLeft {
      margin-right: 3.2rem;
    }
  }
}
.bookingTime {
  margin-bottom: 0.8rem;
  .bookingTimeTitle {
    padding: 1.5rem 1.2rem;
    box-sizing: border-box;
    border-bottom: 0.1rem solid #f8f8f8;
    .titleLeft span:nth-child(1) {
      margin-right: 3.2rem;
    }
    .titleRight {
      .cleanBtn {
        width: 4rem;
        height: 2.4rem;
        line-height: 2.4rem;
        border: 0.1rem solid #31a2a3;
        text-align: center;
      }
    }
  }
  .bookingTImeShortcut {
    padding: 1.5rem 1.2rem;
    box-sizing: border-box;
    border-bottom: 0.1rem solid #f8f8f8;
    .shortcutTitle {
      margin-right: 3.2rem;
    }
    .shortcutContent {
      .shortcutItem {
        display: inline-block;
        width: 5.2rem;
        height: 2.4rem;
        line-height: 2.4rem;
        text-align: center;
        // border: 0.1rem solid #111;
        border-radius: 0.4rem;
        margin-right: 2rem;
      }
    }
  }
  .bookingTimeContent {
    padding: 1.5rem 1.2rem;
    box-sizing: border-box;
    height: 24rem;
    .btc_left {
      flex-basis: 2rem;
      flex-shrink: 0;
      padding-top: 2rem;
      color: #888;
      div {
        height: 4.6rem;
        position: relative;
        span {
          position: absolute;
          bottom: 0;
        }
      }
    }
    .btc_right {
      overflow-x: auto;
      .btc_item {
        height: 100%;
        width: 3.6rem;
        margin-right: 1.2rem;
        flex-basis: 3.6rem;
        flex-shrink: 0;
        white-space: nowrap;
        .btc_itemHeader {
          text-align: center;
          margin-bottom: 0.4rem;
        }
        .btc_subItem {
          width: 3.6rem;
          height: 4rem;
          line-height: 4rem;
          text-align: center;
          border-radius: 0.4rem;
          margin-bottom: 0.8rem;
          background-color: #e2e2e2;
        }
      }
    }
  }
}
.serviceType {
  margin-bottom: 0.8rem;
  .serviceTop {
    padding: 1.4rem 0.8rem;
    box-sizing: border-box;
  }
  .serviceContent {
    padding: 1.4rem 0.8rem;
    box-sizing: border-box;
    border-bottom: 0.8rem solid #f8f8f8;
    .serviceItemBox {
      .serviceItem {
        .serviceItemTop {
          width: 7.3rem;
          height: 4.4rem;
          line-height: 4.4rem;
          text-align: center;
          box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25);
        }
      }
    }
  }
  .serviceBottom {
    padding: 0.6rem 0.8rem;
    box-sizing: border-box;
    .bottomLeft {
      flex: 1;
    }
    .bottomRight {
      flex: 4;
      .toolsItemBox {
        display: inline-block;
        margin-right: 1.6rem;
        margin-bottom: 1.2rem;
        .toolsItem {
          display: inline-block;
          height: 2.8rem;
          line-height: 2.8rem;
          text-align: center;
          padding: 0 1.4rem;
        }
      }
      .otherTools {
        .otherToolsInput {
          border: 0.1rem solid #999;
          border-radius: 0.4rem;
          min-height: 4.6rem;
        }
      }
    }
  }
}
.unactive {
  background-color: #fff;
  color: #31a2a3;
}
.active {
  background-color: #31a2a3;
  color: #fff;
}
.shortcutUnactive {
  background-color: #fff;
  color: #111;
  border: 0.1rem solid #111;
}
.shortcutActive {
  background-color: #31a2a3;
  color: #fff;
  border: 0.1rem solid #31a2a3;
}
.toolActive {
  background-color: #31a2a3;
  color: #fff;
  border: 0.1rem solid #31a2a3;
}
.toolUnactive {
  background-color: #fff;
  color: #555;
  border: 0.1rem solid #555;
}
.able {
  color: #31a2a3;
}
.disable {
  background-color: #ececec;
  color: #fff;
}
.disableText {
  color: #ccc;
}
.peopleNum {
  padding: 0.6rem 0.8rem;
  box-sizing: border-box;
  margin-bottom: 1.2rem;
  width: 100%;
  div:nth-child(1) {
    // margin-right: 1.2rem;
    flex: 1;
  }
  .peopleNumInput {
    background-color: #f5f5f5;
    border-radius: 0.4rem;
    min-height: 4.6rem;
  }
}
.footerText {
  padding: 0 1.2rem;
  box-sizing: border-box;
  margin-bottom: 8rem;
}
.footer {
  width: 100%;
  height: 6rem;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 0px -4px 8px rgba(204, 204, 204, 0.15);
  .footerBtn {
    width: 34.3rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 4rem;
    margin: 1rem auto;
  }
}
.timeBoxSelected {
  background-color: #31a2a3 !important;
}
.timeBoxDisable {
  background-color: #ff9791 !important;
}
.timeBoxRest {
  background-color: #888 !important;
}
</style>
